<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo</title>
    <link rel="stylesheet" href="../layui/css/layui.css">
    <script src="../layui/layui.js"></script>
</head>
<style>
    /* 添加底色效果会更明显 */
    body {
        background: #efeff4;
    }
</style>

<body>
    <div class="demo01"></div>
    <div class="demo02"></div>
</body>
<script>
    // 配置
    layui.config({
        base: "../model/"
    })
    // 图文列表
    layui.use(["jmMedia"], function () {
        var jmMedia = layui.jmMedia;

        // 渲染
        var demo01 = jmMedia.render({
            elem: ".demo01",
            type: "normal", //默认风格为normal，可选card
            addClass: "",//可追加class来新增样式
            data: [
                {
                    id: 1, //id,标识
                    href: "www.baidu.com", //可选，跳转链接
                    title: "标题",
                    desc: "能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？",//可选，描述
                    img: "../avatar_1.jpg",//可选，图片
                    icon: "layui-icon layui-icon-right",//可选，右侧图标
                },
                {
                    id: 2,
                    title: "幸福",
                    desc: "能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？",//可选，描述
                    icon: "layui-icon layui-icon-right",//可选，右侧图标
                }, {
                    id: 3,
                    title: "标题",
                    desc: "能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？",//可选，描述
                    img: "../avatar_1.jpg",//可选，图片
                }
            ],
            callback: function (dom) {
                console.log(dom)
            }
        });


        setTimeout(function () {
            // 追加数据
            jmMedia.addData(demo01, [{
                id: 3,
                title: "更改数据",
                desc: "能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？",//可选，描述
                img: "../avatar_2.png",//可选，图片
            }, {
                id: 4,
                title: "标题",
                desc: "能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？",//可选，描述
                img: "../avatar_1.jpg",//可选，图片
            }])
        }, 5000)

        // 渲染
        jmMedia.render({
            elem: ".demo02",
            type: "card", //默认风格为normal，可选card
            addClass: "",//可追加class来新增样式
            data: [
                {
                    id: 1, //id,标识
                    href: "www.baidu.com", //可选，跳转链接
                    title: "标题",
                    desc: "能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？",//可选，描述
                    img: "../avatar_1.jpg",//可选，图片
                    icon: "layui-icon layui-icon-right",//可选，右侧图标
                },
                {
                    id: 12,
                    title: "幸福",
                    desc: "能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？",//可选，描述
                    icon: "layui-icon layui-icon-right",//可选，右侧图标
                }, {
                    id: 13,
                    title: "标题",
                    desc: "能和心爱的人一起睡觉，是件幸福的事情；可是，打呼噜怎么办？",//可选，描述
                    img: "../avatar_1.jpg",//可选，图片
                }
            ],
            callback: function (dom) {
                console.log(dom)
            }
        })

    })
</script>

</html>